<template>
    <div>
        <el-button type="primary" @click="handleEdit">新增</el-button>
        <el-input v-for="(condition, index) in query.SearchConditions" v-model="condition.Value" :key="index"
            style="width: 240px" clearable :placeholder="'Please input ' + condition.FieldName" />
        <el-button type="primary" @click="getDataList">查询</el-button>

    </div>
    <el-table height="800px" :show-overflow-tooltip="true" :data="tableData">
        <el-table-column v-for="item in bgcolumnNames" :prop="item.Name" :label="item.Label" />
        <el-table-column fixed="right" label="操作" width="120">
            <template #default="scope">
                <el-button link type="primary" @click="handleEdit(scope.row)" size="small">编辑</el-button>
                <el-popconfirm title="确定删除?" @confirm="handleDelete(scope.row)">
                    <template #reference>
                        <el-button link type="danger" size="small">删除</el-button>
                    </template>
                </el-popconfirm>
            </template>
        </el-table-column>
    </el-table>

    <EditDialog ref="dialogRef" @confirm="onConfirm" :bgcolumnNames="bgcolumnNames"></EditDialog>
</template>

<script lang="ts" setup>
import { ref, nextTick, reactive, onMounted } from 'vue';
import { ElMessage } from 'element-plus'

import EditDialog from '../components/EditDialog.vue';
import api from '../api'
const query = reactive({
    pageIndex: 1,
    pageSize: 30,
    SearchConditions: [{
        FieldName: 'Name',
        ConditionType: 1,
        Value: ''
    }, {
        FieldName: 'Content',
        ConditionType: 1,
        Value: ''
    }]
})
var tableData = ref([])
const dialogRef = ref<InstanceType<typeof EditDialog>>();


onMounted(async () => {
    try {
        console.log('api', api)
        getDataList()
        // const data = await $api.get('/your-api-endpoint');
        // 使用获取的数据
    } catch (error) {
        console.error('API Error:', error);
    }
});

const handleEdit = async (item) => {
    console.log('edit', item)
    var editItem = JSON.parse(JSON.stringify(item));

    console.log('dialogRef', dialogRef)

    dialogRef.value.open(editItem)
}
// 定义方法
const getDataList = async () => {
    console.log('query', query)
    var res = await api.post('Student/List', query)
    console.log('getlist res', res)
    var data = res.Data
    tableData.value = data.list
    bgcolumnNames = data.columnNames
};
var bgcolumnNames = []

/**
 * 确认并更新模板信息
 * 无参数
 * 无明确返回值，但会通过控制台输出和界面提示更新结果
 */
const onConfirm = async (item) => {
    // 提交编辑中的模板信息至服务器
    console.log('confirm', item)
    var res = await api.post('Student/Update', item)
    console.log('res', res)
    // 根据服务器返回代码判断操作成功与否
    if (res.Code == 200) {
        //隐藏对话框
        dialogRef.value.close()
        // 成功更新，显示成功消息并刷新列表
        ElMessage({
            message: res.Message,
            type: 'success',
        })
        getDataList()
    }
}
const handleDelete = async item => {
    console.log('delete', item)
    item.isDeleted = true
    var res = await api.post('Student/Update', item)
    if (res.Code == 200) {
        // 成功更新，显示成功消息并刷新列表
        ElMessage({
            message: "删除成功",
            type: 'success',
        })
        getDataList()
    }
}


</script>

<style>
.CodeMirror {
    margin-right: 100px;
}

.CodeMirror-sizer {
    min-width: 500px !important;
}

.el-dialog__body {
    overflow: auto;
    max-height: 500px;
}
</style>